<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>配置值获取示例</span>
        </div>
      </template>
      
      <div class="config-examples">
        <h3>基本使用</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="hover" class="box-card mb-3">
              <template #header>
                <div class="card-header">
                  <span>网站名称 (site_name)</span>
                </div>
              </template>
              <ConfigValue config-key="site_name" />
            </el-card>
          </el-col>
          
          <el-col :span="12">
            <el-card shadow="hover" class="box-card mb-3">
              <template #header>
                <div class="card-header">
                  <span>网站描述 (site_description)</span>
                </div>
              </template>
              <ConfigValue config-key="site_description" />
            </el-card>
          </el-col>
        </el-row>
        
        <h3>不同类型的配置值</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover" class="box-card mb-3">
              <template #header>
                <div class="card-header">
                  <span>网站Logo (site_logo)</span>
                </div>
              </template>
              <ConfigValue 
                config-key="site_logo" 
                image-width="150px" 
                image-height="80px"
              />
            </el-card>
          </el-col>
          
          <el-col :span="8">
            <el-card shadow="hover" class="box-card mb-3">
              <template #header>
                <div class="card-header">
                  <span>显示Banner (show_banner)</span>
                </div>
              </template>
              <ConfigValue config-key="show_banner" />
            </el-card>
          </el-col>
          
          <el-col :span="8">
            <el-card shadow="hover" class="box-card mb-3">
              <template #header>
                <div class="card-header">
                  <span>客服电话 (service_tel)</span>
                </div>
              </template>
              <ConfigValue 
                config-key="service_tel" 
                placeholder="未设置客服电话"
              />
            </el-card>
          </el-col>
        </el-row>
        
        <h3>自定义配置值获取</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="hover" class="box-card mb-3">
              <template #header>
                <div class="card-header">
                  <span>自定义配置键</span>
                  <el-button 
                    type="primary" 
                    size="small"
                    @click="loadCustomConfig"
                  >
                    获取
                  </el-button>
                </div>
              </template>
              <el-form inline>
                <el-form-item label="配置键名">
                  <el-input v-model="customKey" placeholder="请输入配置键名"></el-input>
                </el-form-item>
              </el-form>
              <div v-if="customConfig" class="mt-3">
                <p><strong>配置键:</strong> {{ customConfig.key }}</p>
                <p><strong>配置值:</strong> {{ customConfig.value }}</p>
                <p><strong>类型:</strong> {{ customConfig.type }}</p>
                <p><strong>分组:</strong> {{ customConfig.group }}</p>
                <p><strong>描述:</strong> {{ customConfig.description }}</p>
              </div>
              <div v-else-if="customConfigError" class="error-message">
                {{ customConfigError }}
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="12">
            <el-card shadow="hover" class="box-card mb-3">
              <template #header>
                <div class="card-header">
                  <span>使用说明</span>
                </div>
              </template>
              <div>
                <p>在组件中直接使用：</p>
                <pre>&lt;ConfigValue config-key="site_name" /&gt;</pre>
                
                <p>在JS代码中使用：</p>
                <pre>
import { getConfigByKey } from '@/utils/config'

async function loadConfig() {
  const { success, data } = await getConfigByKey('site_name')
  if (success) {
    console.log(data.value)
  }
}</pre>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'
import ConfigValue from '@/components/ConfigValue.vue'
import { getConfigByKey } from '@/utils/config'
import { ElMessage } from 'element-plus'

export default {
  name: 'ConfigExample',
  components: {
    ConfigValue
  },
  setup() {
    const customKey = ref('site_name')
    const customConfig = ref(null)
    const customConfigError = ref('')
    
    /**
     * 加载自定义配置
     */
    const loadCustomConfig = async () => {
      if (!customKey.value) {
        ElMessage.warning('请输入配置键名')
        return
      }
      
      try {
        const { success, data, message } = await getConfigByKey(customKey.value)
        
        if (success && data) {
          customConfig.value = data
          customConfigError.value = ''
          ElMessage.success('获取成功')
        } else {
          customConfig.value = null
          customConfigError.value = message
          ElMessage.error(message)
        }
      } catch (error) {
        customConfig.value = null
        customConfigError.value = error.message || '获取失败'
        ElMessage.error(error.message || '获取失败')
      }
    }
    
    return {
      customKey,
      customConfig,
      customConfigError,
      loadCustomConfig
    }
  }
}
</script>

<style scoped>
.config-examples h3 {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #606266;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mb-3 {
  margin-bottom: 15px;
}

.mt-3 {
  margin-top: 15px;
}

.error-message {
  color: #F56C6C;
  margin-top: 10px;
}

pre {
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  margin: 5px 0;
  overflow: auto;
}
</style> 